<template>
	<view class="container">
		<view class="tui-cmt-title bg-white">全部评论（{{cmtTotal}}）</view>
		<view class="tui-cmtbox bg-white padding-sm">
			<view class="tui-cmt-cell" v-for="(item,index) in cmtList" :key="index">
				<image :src="item.avatar" class="tui-avatar"></image>
				<view class="tui-cmt-detail">
					<view class="tui-header-box">
						<view class="tui-cmt-nickname">{{item.nickname}}</view>
					</view>
					<view class="tui-cmt-content text-content">{{item.content}}</view>
					<view class="tui-reply-box" v-if="item.replayNum>0">
						<tui-list-cell backgroundColor="#f2f2f2" :size="28" padding="10rpx 20rpx" v-for="(items,index2) in item.replayArray" 
						:key="index2" :unlined="item.replayNum<2 && item.replayArray.length-1==index">
							<view class="tui-flex-1 tui-reply-nickname">{{items.nickname}}</view>
							<view class="tui-flex-1 text-content">{{items.content}}</view>
						</tui-list-cell>
						<view v-if="item.replayNum > 0" @tap="cmtReply" :data-cmtuid="item.uid">
							<tui-list-cell padding="16rpx 20rpx" backgroundColor="#f2f2f2" :size="28" :unlined="true">
								<view class="tui-flex-1  tui-cell-last">
									<text>共{{item.replayNum}}条回复</text>
									<tui-icon name="arrowright" :size="22" color="#5677fc"></tui-icon>
								</view>
							</tui-list-cell>
						</view>
					</view>
					<view class="tui-footer">
						{{item.time}}
						<view class="tui-primary tui-ml" hover-class="tui-opcity" :hover-start-time="150"
						v-if="item.replayNum == 0" @tap="cmtReply" :data-cmtuid="item.uid">回复</view>
					</view>
				</view>
			</view>
		</view>

		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="darkgold"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f1f1f1" text="没有更多评论"></tui-nomore>
		<!--加载loadding-->
		<view class="tui-safearea-bottom"></view>
		
		<view class="tui-operation">
			<view class="tui-operation-inner">
				<view class="tui-btn-comment" @tap="btnCmt">发表你的评论...</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collectionUid: "",
				cmtList: [],
				cmtTotal: 0,
				pageNum: 1,
				pageSize: 10,
				loadding: false,
				pullUpOn: true
			}
		},
		onLoad(option) {
			if (option.collectionUid) {
				this.collectionUid = option.collectionUid
				this.getCommentList()
			}
		},
		methods: {
			getCommentList(type) {
				this.fetch.request("/api/wxmini/getCommentList", "POST", {
					collectionUid: this.collectionUid,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}, false, true, false, this)
				.then((res) => {
					if (type == 'refresh') {
						setTimeout(() => {
							uni.stopPullDownRefresh()
						}, 200);
					}
					if (res.code == 0) {
						let data = res.data
						this.cmtTotal = data.total
						this.cmtList = []
						data.rows.forEach((item) => {
							this.cmtList.push({
								uid: item.uid,
								avatar: item.avatar,
								nickname: item.nickName,
								fabulous: 123,
								isFabulous: false,
								content: item.content,
								replayNum: item.replyCount,
								replayArray: item.replyArray,
								time: item.createDate,
							})
						})
					}
				}).catch(() => {})
			},
			cmtFabulous: function(e) {
				let index = e.currentTarget.id;
				let fabulousObj = this.cmtList[index];
				let isFabulous = this.cmtList[index].isFabulous;
				let fabulous = this.cmtList[index].fabulous;
				let fabulousNum = isFabulous ? fabulous - 1 : fabulous + 1;
				this.$set(fabulousObj, "fabulous", fabulousNum);
				this.$set(fabulousObj, "isFabulous", !isFabulous);
			},
			btnCmt: function() {
				uni.navigateTo({
					url: '../comment/comment'
				})
			},
			cmtReply: function() {
				uni.navigateTo({
					url: '../commentReply/commentReply'
				})
			}
		},
		//页面相关事件处理函数--监听用户下拉动作
		onPullDownRefresh: function() {
			this.pageNum = 1
			this.pullUpOn = true
			this.loadding = false
			this.getCommentList("refresh")
		},
		// 页面上拉触底事件的处理函数
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true
			this.pageNum = this.pageNum + 1
			this.fetch.request("/api/wxmini/getCommentList", "POST", {
				collectionUid: this.collectionUid,
				pageNum: this.pageNum,
				pageSize: this.pageSize
			}, false, true, false, this)
			.then((res) => {
				this.loadding = false
				if (res.code == 0) {
					let data = res.data
					if (this.cmtList.length >= data.total) {
						this.pullUpOn = false
						return
					}
					data.rows.forEach((item) => {
						this.cmtList.push({
							uid: item.uid,
							avatar: item.avatar,
							nickname: item.nickName,
							fabulous: 123,
							isFabulous: false,
							content: item.content,
							replayNum: item.replyCount,
							replayArray: item.replyArray,
							time: item.createDate,
						})
					})
					if (this.cmtList.length == data.total) {
						this.pullUpOn = false
					}
				}
			}).catch(() => {
				this.loadding = false
			})
		}
	}
</script>

<style>
	
	.container {
		padding-bottom: 110rpx;
		box-sizing: border-box;
	}

	.tui-cmt-title {
		font-size: 30rpx;
		font-weight: bold;
		position: relative;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.tui-cmt-title::after {
		content: '';
		position: absolute;
		left: 12rpx;
		top: 30%;
		width: 6rpx;
		height: 36%;
		background-color: #8c7866;
	}

	.tui-cmt-cell {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eaeef1;
	}

	.tui-cmt-cell:first-child {
		padding-top: 0;
	}
	
	.tui-cmt-cell:last-child {
		padding-bottom: 0;
		border-bottom: 0 !important;
	}
	.tui-avatar {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		display: block;
		flex-shrink: 0;
	}

	.tui-cmt-detail {
		width: 100%;
		padding-left: 16rpx;
		box-sizing: border-box;
	}

	.tui-header-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		font-size: 30rpx;
	}

	.tui-cmt-nickname {
		/* color: #5677fc; */
		color: #9a9a9a;
	}

	.tui-fabulous {
		color: #9a9a9a;
	}

	.tui-fabulous text {
		padding-right: 4rpx;
		font-size: 24rpx;
	}

	.tui-cmt-content {
		color: #333;
		text-align: justify;
		padding-top: 8rpx;
		word-break: break-all;
		word-wrap: break-word;
	}

	.tui-reply-box {
		border-radius: 8rpx;
		overflow: hidden;
		margin-top: 16rpx;
	}

	.tui-cell-last {
		display: flex;
		align-items: center;
		color: #5677fc;
	}

	.tui-flex-1 {
		flex: 1;
		width: 100%;
	}

	.tui-reply-nickname {
		font-size: 24rpx;
		color: #7a7a7a;
		padding-bottom: 8rpx;
	}

	.tui-footer {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		margin-top: 16rpx;
		color: #9a9a9a;
	}

	.tui-primary {
		color: #5677fc !important;
	}

	.tui-ml {
		margin-left: 16rpx;
	}

	.tui-cell-last .tui-icon-class {
		width: 40rpx !important;
		margin-left: -10rpx;
	}

	.tui-operation {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.95);
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99999;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-operation-inner {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}

	.tui-operation::before {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		border-top: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-btn-comment {
		height: 64rpx;
		width: 100%;
		background: #ededed;
		color: #999;
		border-radius: 8rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		padding-top: 0;
	}
</style>
